<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<title>钦天监</title>
	<link rel="stylesheet" href="onsenui/css/onsenui.css">
	<link rel="stylesheet" href="onsenui/css/onsen-css-components.min.css">
	<script src="onsenui/js/onsenui.min.js"></script>
	<script src="NoSleep.min.js"></script>
	<script src="baidu_tts_cors.js"></script>
</head>

<body>
	<div style="display:none">
		<script src="https://s96.cnzz.com/z_stat.php?id=1275583491&web_id=1275583491" language="JavaScript"></script>
	</div>
	<audio id="mobile-audio-hack" style="display:none"></audio>
	<ons-page>
		<ons-toolbar>
			<div class="center" id="title">

			</div>
		</ons-toolbar>

		<ons-modal id="loading">
			<div style="text-align: center; padding: 32px">
				<p id="loading-p">
					<ons-icon icon="md-spinner" size="28px" spin></ons-icon> Loading...
				</p>
				<button class="button button--large" id="mobile-hack" style="display:none" onclick="Main.mobileHack()">启动</button>
			</div>
		</ons-modal>

		<ons-tabbar swipeable position="auto">
			<ons-tab page="timeline.html" label="时间轴" active></ons-tab>
			<ons-tab page="eureka-watcher.html" label="水晶义勇队"></ons-tab>
			<ons-tab page="settings.html" label="设置"></ons-tab>
		</ons-tabbar>
	</ons-page>

	<template id="timeline.html">
		<ons-page>
			<ons-list id="timeline-list">
			</ons-list>
			<ons-speed-dial position="bottom right" direction="up">
				<ons-fab>
					<ons-icon icon="md-menu"></ons-icon>
				</ons-fab>
				<ons-speed-dial-item id="reset-button">
					<ons-icon icon="md-refresh"></ons-icon>
				</ons-speed-dial-item>
			</ons-speed-dial>
		</ons-page>
	</template>

	<template id="eureka-watcher.html">
		<ons-page>
			<ons-list id="eureka-list">
			</ons-list>
		</ons-page>
	</template>
	<template id="eureka-item">
		<ons-list-item tappable>
			<ons-checkbox class="left"></ons-checkbox>
			<span class="center"></span>
		</ons-list-item>
	</template>

	<template id="settings.html">
		<ons-page>
			<ons-list>
				<ons-list-header>讲述人</ons-list-header>
				<ons-list-item modifier="longdivider">
					<div class="left">
						当前使用的讲述人
					</div>
					<div class="right">
						<ons-select id="voice-select">
						</ons-select>
					</div>
				</ons-list-item>
				<!-- <ons-list-item modifier="longdivider">
					<div class="left">
						是否播报所有时间点
					</div>
					<div class="right">
						<ons-switch id="play-all-switch"></ons-switch>
					</div>
				</ons-list-item> -->
			</ons-list>
			<ons-card>
				<div class="title">
					About Me
				</div>
				<div class="content" style="text-align:right">
					应是绿肥红瘦<span style="color:palevioletred">❀</span>萌芽池<br />
					我永远喜欢公式光
				</div>
			</ons-card>
			<ons-card>
				<div class="content" style="text-align:center">
					时间轴收集自网络<br />
					感谢catamiao等网友的无私奉献
				</div>
			</ons-card>
			<!-- <ons-button modifier="large" id="debug-button">DEBUG</ons-button> -->
		</ons-page>
	</template>

	<script>
		document.write("<script src=FFXIV.Timeline.js?" + Math.random() + "><\/script>");
	</script>
</body>

</html>